<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2018/7/12
  Time: 17:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div class="container-fluid">
    <h3>按钮组</h3>

    <hr />

    <div class="panel">
        <div class="panel-heading">
            <div class="panel-title">一组按钮 <code>.pearls</code></div>
        </div>
        <div class="panel-body">
            <div class="pearls row">
                <div class="btn-group">
                    <button type="button" class="btn">左</button>
                    <button type="button" class="btn">中</button>
                    <button type="button" class="btn">右</button>
                </div>
            </div>
        </div>
    </div>

    <div class="panel">
        <div class="panel-heading">
            <div class="panel-title">多组按钮 <code>.pearls</code></div>
        </div>
        <div class="panel-body">
            <div class="pearls row">

                <div class="btn-toolbar">
                    <div class="btn-group">
                        <button class="btn">复制</button>
                        <button class="btn">剪切</button>
                        <button class="btn">粘贴</button>
                        <button class="btn">删除</button>
                    </div>
                    <div class="btn-group">
                        <button class="btn"><i class="icon icon-picture"></i></button>
                        <button class="btn"><i class="icon icon-file-movie"></i></button>
                        <button class="btn"><i class="icon icon-file-text-o"></i></button>
                    </div>
                    <div class="btn-group">
                        <button class="btn"><i class="icon icon-code"></i></button>
                    </div>

                </div>

            </div>
        </div>
    </div>


    <div class="panel">
        <div class="panel-heading">
            <div class="panel-title">垂直按钮组 <code>.pearls</code></div>
        </div>
        <div class="panel-body">
            <div class="pearls row">

                <div class="btn-toolbar">
                    <div class="btn-group btn-group-vertical">
                        <button type="button" class="btn">上面</button>
                        <button type="button" class="btn">中间</button>
                        <button type="button" class="btn">下面</button>
                    </div>
                </div>

            </div>
        </div>
    </div>


    <div class="panel">
        <div class="panel-heading">
            <div class="panel-title">基本下拉按钮组 <code>.pearls</code></div>
        </div>
        <div class="panel-body">
            <div class="pearls row">

                <div class="btn-group">
                    <button type="button" class="btn">春天</button>
                    <button type="button" class="btn">夏天</button>
                    <div class="btn-group">
                        <button id="btnGroupDrop1" type="button" class="btn dropdown-toggle" data-toggle="dropdown">未来 <span class="caret"></span></button>
                        <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupDrop1">
                            <li><a href="#">秋天</a></li>
                            <li><a href="#">冬天</a></li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div class="panel">
        <div class="panel-heading">
            <div class="panel-title">分裂式下拉按钮组 <code>.pearls</code></div>
        </div>
        <div class="panel-body">
            <div class="pearls row">

                <div class="btn-group">
                    <button type="button" class="btn btn-danger">操作</button>
                    <div class="btn-group">
                        <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
                            <span class="caret"></span>
                            <span class="sr-only">操作</span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">编辑</a></li>
                            <li><a href="#">删除</a></li>
                            <li class="divider"></li>
                            <li><a href="#">撤销</a></li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>
    </div>



    <div class="panel">
        <div class="panel-heading">
            <div class="panel-title">上拉按钮组 <code>.pearls</code></div>
        </div>
        <div class="panel-body">
            <div class="pearls row">

                <div class="btn-group dropup">
                    <button type="button" class="btn btn-danger">操作</button>
                    <div class="btn-group">
                        <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
                            <span class="caret"></span>
                            <span class="sr-only">操作</span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">编辑</a></li>
                            <li><a href="#">删除</a></li>
                            <li class="divider"></li>
                            <li><a href="#">撤销</a></li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>
    </div>


    <div class="panel">
        <div class="panel-heading">
            <div class="panel-title">不同大小的按钮组 <code>.pearls</code></div>
        </div>
        <div class="panel-body">
            <div class="pearls row">
                <div class="btn-toolbar">

                    <!-- 大的 -->
                    <div class="btn-group">
                        <button type="button" class="btn btn-lg">左</button>
                        <button type="button" class="btn btn-lg">中</button>
                        <button type="button" class="btn btn-lg">右</button>
                    </div>
                    <!-- 默认大小 -->
                    <div class="btn-group">
                        <button type="button" class="btn">左</button>
                        <button type="button" class="btn">中</button>
                        <button type="button" class="btn">右</button>
                    </div>
                    <!-- 小的 -->
                    <div class="btn-group">
                        <button type="button" class="btn btn-sm">左</button>
                        <button type="button" class="btn btn-sm">中</button>
                        <button type="button" class="btn btn-sm">右</button>
                    </div>
                    <!-- 超小的 -->
                    <div class="btn-group">
                        <button type="button" class="btn btn-xs">左</button>
                        <button type="button" class="btn btn-xs">中</button>
                        <button type="button" class="btn btn-xs">右</button>
                    </div>

                </div>

            </div>
        </div>
    </div>


    <div class="panel">
        <div class="panel-heading">
            <div class="panel-title">不同颜色的按钮组 <code>.pearls</code></div>
        </div>
        <div class="panel-body">
            <div class="pearls row">
                <div class="btn-toolbar">

                    <div class="btn-group">
                        <button type="button" class="btn">Normal</button>
                        <button type="button" class="btn btn-primary">.btn-primary</button>
                        <button type="button" class="btn btn-warning">.btn-warning</button>
                        <button type="button" class="btn btn-danger">.btn-danger</button>
                        <button type="button" class="btn btn-success">.btn-success</button>
                        <button type="button" class="btn btn-info">.btn-info</button>
                    </div>

                </div>

            </div>
        </div>
    </div>





</div>
